<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>小米商品详情</title>
    <style>
        body {
            background-color: #ccc;
        }
        * {margin: 0; padding: 0;}
        .container{
            padding: 20px;
            margin: 20px auto;
            width: 200px;
            background-color: white;
            text-align: center;
            border: 1px solid;
        }
        h3, p {
            text-align: center;
            margin-bottom: 10px;
        }

        .desc {
            color: rgb(155, 157, 159);
            font-size: 12px;
            text-overflow: ellipsis;
            white-space: nowrap;
            overflow: hidden;
        }
        .now-price {
            color: orange;
            font-size: 20px;
            font-weight: bold;
            padding-right: 30px;
            border-right: 2px solid orange;
        }
        .old-price {
            text-decoration: line-through;
            color: grey;
            margin-left: 10px;
        }
    </style>
</head>
<body>
    <!-- 160 * 160 -->
    <div class="container">
        <a href="#"><img width="200" src="imgs/erji.webp" alt="耳机" title="小米耳机"/></a>
        <h3>XiaoMi 开放式耳机</h3>
        <p class="desc">舒适稳固佩戴 | 超线性发生单元 | 独立设计</p>
        <p><span class="now-price">649元</span><span class="old-price">699元</span></p>
    </div>
    
</body>
</html>